<template>
     <!-- 省市 弹窗 --> 
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <div class="van-model" v-show="isShowAreaModel">
        <van-area 
        :area-list="areaList" 
        value="440000"
        :columns-num="2" 
        title="所在地区" 
        @confirm="onAreaConfirm"
        @cancel="onAreaCancel"/>
      </div>
    </transition>
</template>
<script> 
import Vue from "vue"
import areaList from "@/utils/area.js"
import mixin from "@/utils/mixin" 
import { Toast,Area } from "vant"
Vue.use(Toast).use(Area);
export default {
  name: "ModalArea",
  mixins: [mixin],
  props: [
      "isShowAreaModel", 
  ],
  data() {
    return { 
       areaList,
    };
  },
  mounted() {},
  methods: {
    // 省市 
    onAreaConfirm(value) {
    //   this.isShowAreaModel = false; 
      let areaArr = []
      value.forEach(element => {
          areaArr.push(element.name);
      }); 
        this.$emit("update:isShowAreaModel" ,false);   
        this.$emit("onAreaConfirm", areaArr.join("-") );  
    },
    onAreaCancel() {
        this.$emit("update:isShowAreaModel" ,false);   
    }, 
  }
};
</script>
<style lang="scss" scoped>

</style>
